<template>
  <div class="container">
    <BasicForm @register="registerForm" />
    <div>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleSubmit()" :loading="saveLoading" class="ml-5"
        >保存</a-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { BasicForm, useForm } from '@/components/Form';
  import { useMessage } from '@/hooks/web/useMessage';
  import { DictCategoryList } from '@/api/platform/dictionary';
  import { ref } from 'vue';
  import { ISmsAddData } from '@/api/message/template/type';
  import { SmsEdit } from '@/api/message/template';
  import { router } from '@/router';
  import { useRoute } from 'vue-router';

  const route = useRoute();
  let row = JSON.parse(route.query.row as string);
  // function setFormData() {}

  const saveLoading = ref(false);
  const { createMessage } = useMessage();

  const [registerForm, { validate, clearValidate, submit, setFieldsValue }] = useForm({
    schemas: [
      {
        field: 'typeId',
        component: 'ApiSelect',
        label: '公共号模板',
        required: true,
        componentProps: {
          api: DictCategoryList,
          labelField: 'name',
          valueField: 'id',
        },
      },
      {
        field: 'sceneName',
        component: 'Input',
        label: '模板名称',
        required: true,
      },
      {
        field: 'typeId',
        component: 'ApiSelect',
        label: '消息模板类型',
        required: true,
        componentProps: {
          api: DictCategoryList,
          labelField: 'name',
          valueField: 'id',
        },
      },
    ],
    autoFocusFirstItem: true,
    actionColOptions: {
      span: 24,
    },
    labelWidth: 120,
    baseColProps: { span: 18 },
    showSubmitButton: false,
    showResetButton: false,
    resetFunc: async () => {
      // closeModal();
    },
  });

  function handleCancel() {
    router.back();
  }

  function handleSubmit() {
    submit().then(async () => {
      const data: ISmsAddData = await validate();
      saveLoading.value = true;
      try {
        await SmsEdit({ ...data });

        createMessage.success('提交成功！');
        handleCancel();
      } catch (error) {
        console.log('error--->', error);
        saveLoading.value = false;
      }
    });
  }
</script>

<style lang="less" scoped>
  .container {
    margin: 15px;
    padding: 15px;
    background-color: #fff;
  }
</style>
